<section class="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
  <div class="w-full max-w-md p-8 bg-white rounded-lg shadow dark:bg-gray-800">
    <div class="text-center mb-8">
      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">团队项目管理</h1>
      <p class="mt-2 text-gray-600 dark:text-gray-400">请输入用户key登录</p>
    </div>

    <form {{on "submit" this.handleLogin}} class="space-y-6">
      <div>
        <label for="userKey" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
          用户key
        </label>
        <input
          id="userKey"
          type="text"
          value={{this.userKey}}
          {{on "input" this.updateUserKey}}
          class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
          placeholder="请输入您的用户key"
          required
          autofocus
        />
      </div>

      {{#if this.errorMessage}}
        <div class="p-3 text-sm text-red-700 bg-red-100 rounded-md dark:bg-red-900 dark:text-red-200">
          {{this.errorMessage}}
        </div>
      {{/if}}

      <button
        type="submit"
        disabled={{this.isLoading}}
        class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {{#if this.isLoading}}
          <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          登录中...
        {{else}}
          登录
        {{/if}}
      </button>
    </form>
  </div>
</section>